<template>
    <div>
        <Bread></Bread>
        <el-card>
            <el-button type="primary" @click="addRole">添加角色</el-button>
            <el-table :data="roleList" style="width: 100%">
                <el-table-column type="expand">
                    <template slot-scope="scope">
                        <!-- 一级分类 -->
                        <el-row v-for="item in scope.row.children" :key="item.id" type="flex" align="middle"
                            class="oneRow">
                            <el-col :span="6">
                                <el-tag closable>{{ item.authName }}</el-tag>
                            </el-col>
                            <el-col :span="18">
                                <!-- 二级分类 -->
                                <el-row v-for="it in item.children" :key="it.id">
                                    <el-col :span="5">
                                        <el-tag type="success" closable>{{ it.authName }}</el-tag>
                                    </el-col>
                                    <el-col :span="19">
                                        <!-- 三级分类 -->
                                        <el-tag type="warning" v-for="i in it.children" :key="i.id" closable
                                            @close="delRight(scope.row.id, i.id)">
                                            {{ i.authName }}
                                        </el-tag>
                                    </el-col>
                                </el-row>
                            </el-col>
                        </el-row>
                    </template>
                </el-table-column>
                <el-table-column label="#" prop="id">
                </el-table-column>
                <el-table-column label="角色名称" prop="roleName">
                </el-table-column>
                <el-table-column label="角色描述" prop="roleDesc">
                </el-table-column>
                <el-table-column label="操作" prop="address" width="300px">
                    <template slot-scope="scope">
                        <el-button type="warning" size="mini" @click="editRole(scope.row.id)">编辑</el-button>
                        <el-button type="danger" size="mini" @click="delRole(scope.row.id)">删除</el-button>
                        <el-button type="success" size="mini" @click="showRight(scope.row.id)">分配权限</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <Dialog :myDialog="myDialog" :roleAdd="roleAdd" @getRoleList="getRoleList" :editId="editId"></Dialog>
            <!-- 权限树 -->
            <el-dialog title="分配权限" :visible.sync="showTree" @close="close">
                <el-tree ref="tree" :data="treeList" show-checkbox node-key="id" default-expand-all
                    :default-checked-keys="leaf" :props="defaultProps">
                </el-tree>
                <div slot="footer" class="dialog-footer">
                    <el-button @click="showTree = false">取 消</el-button>
                    <el-button type="primary" @click="save">确 定</el-button>
                </div>
            </el-dialog>
        </el-card>
    </div>
</template>

<script>
import Bread from '@/components/Bread.vue'
import Dialog from '@/components/roleDialog.vue'
import roleList from '@/utils/roleApi/roleListApi'
import roleDel from '@/utils/roleApi/roleDelApi.js'
import roleTree from '@/utils/roleApi/roleTreeApi'
import roleSave from '@/utils/roleApi/roleSaveApi'
export default {
    components: { Bread, Dialog },
    data() {
        return {
            roleList: [],//角色列表数据
            myDialog: {
                flag: false,
                type: '',
                title: ''
            },
            /* 添加角色 */
            roleAdd: {
                roleName: '',
                roleDesc: ''
            },
            /* 编辑id  */
            editId: 0,



            /* ---------------------------------- */
            /* 分配权限 */
            showTree: false,//是否显示权限树
            roleId: '',//角色id
            treeList: [],//所有权限数据
            leaf: [],//获取所有三级叶子节点
            defaultProps: {
                label: 'authName',
                children: 'children'
            }
        }
    },
    methods: {
        async getRoleList() {
            let res = await roleList();
            this.roleList = res.data;
        },
        /* 添加角色 */
        addRole() {
            (
                this.myDialog = {
                    flag: true,
                    type: 'add',
                    title: '添加角色'
                }
            ),
                (
                    this.roleAdd = {
                        roleName: '',
                        roleDesc: ''
                    }
                )
        },
        /* 编辑角色 */
        editRole(id) {
            console.log(id);
            this.editId = id;
            (
                this.myDialog = {
                    flag: true,
                    type: 'edit',
                    title: '编辑角色'
                }
            ),
                (
                    this.roleAdd = {
                        roleName: '',
                        roleDesc: ''
                    }
                )
        },
        /* 删除角色 */
        delRole(id) {
            console.log(id);
            this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(async () => {
                let res = await roleDel(id);
                if (res.meta.status == 200) {
                    this.$message({
                        type: 'success',
                        message: '删除成功!'
                    });
                    this.getRoleList();
                }

            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                });
            });
        },




        /* 获取所有权限数据 */
        async getTreeList() {
            let res = await roleTree();
            this.treeList = res.data;
        },
        /* 展开权限树 */
        showRight(id) {
            // console.log(id);
            this.roleId = id;
            this.leaf = [];
            this.showTree = true;
            let key = this.roleList.findIndex(item => {
                return item.id == id;
            })
            this.getLeaf(this.roleList[key].children);
        },
        /* 获取当前角色下的三级权限 */
        getLeaf(arr) {
            // console.log(arr);
            arr.forEach(item => {
                if (item.children) {
                    this.getLeaf(item.children);
                } else {
                    this.leaf.push(item.id);
                }
            })
        },
        /* 权限树模态框确定按钮 */
        async save() {
            console.log(this)
            let all = this.$refs.tree.getCheckedKeys();
            let half = this.$refs.tree.getHalfCheckedKeys();
            let checkString = [...all, ...half].join(',');
            /* 请求角色授权接口 */
            let res = await roleSave(this.roleId, { rids: checkString });
            if (res.meta.status == 200) {
                this.$message.success(res.meta.msg);
                this.getTreeList();
                this.getRoleList();
                this.showTree = false;
            } else {
                this.$message.error(res.meta.msg);
            }
        },
        /* 关闭模态框 */
        close() {
            this.$refs.tree.setCheckedKeys([]);
        }
    },
    mounted() {
        this.getRoleList();
        this.getTreeList();
    }
}
</script>

<style lang="scss" scoped>
.oneRow {
    margin: 20px;
    border-top: 1px solid #eee;
    padding: 20px;
}

.oneRow:last-child() {
    border-bottom: 1px solid #eee;
}
</style>